<!-- 付款申请列表 -->
<template>
    <div class="pay-apply-list">
        <div ref="dgtools" class="filter-container">
            <el-form :model="dg.ps" :inline="true" @keyup.enter.native="getDgList">
                <el-form-item>
                    <el-date-picker v-model="dg.ps.sedate" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" style="width: 200px" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>

                <el-form-item>
                    <el-input style="width: 220px" clearable placeholder="申请人姓名/电话（支持模糊查询）" v-model="dg.ps.applyMan">
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-input style="width: 220px" clearable placeholder="审核人姓名/电话（支持模糊查询）" v-model="dg.ps.checkMan">
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-input style="width: 220px" clearable placeholder="核销人姓名/电话（支持模糊查询）" v-model="dg.ps.checkTwoMan">
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-input maxlength="6" style="width: 100px" clearable placeholder="付款金额" v-model="dg.ps.payMoney">
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-input maxlength="6" style="width: 220px" clearable placeholder="收款车队名称（支持模糊查询）"
                        v-model="dg.ps.subject">
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-select v-model="dg.ps.checkStatus" placeholder="审核状态" style="width: 150px" multiple collapse-tags
                        clearable>
                        <el-option label="已拒绝" value="-1"></el-option>
                        <el-option label="未审核" value="0"></el-option>
                        <el-option label="已审核" value="1"></el-option>
                        <el-option label="已核销" value="2"></el-option>
                    </el-select>
                </el-form-item>

                <el-button type="primary" icon="el-icon-search" @click="getDgList">搜索</el-button>
                <el-button type="primary" icon="el-icon-check"
                    @click="setWriteOffPaymentMd({ state: true })">核销付款</el-button>
            </el-form>

            <TableSelfSet v-if="dg.columns.length > 0" :tbTitle="'付款申请列表'" :dgName="dg.dgName" :tbId="dg.tbName"
                :srcCols="dg.srcCols" :columns="dg.columns" @saveSet="saveTbSet" />
        </div>
        <el-table :ref="dg.tbName" :data="dg.list" row-key="id" :height="bodyHeight" border fit
            :row-class-name="rowClassName" @header-dragend="dragHeader" @selection-change="selRowChange">
            <el-table-column fixed="left" type="index" label="编号" width="40" align="center"></el-table-column>
            <el-table-column fixed="left" type="selection" width="40" align="center"></el-table-column>
            <el-table-column v-for="(col, index) in dg.columns" :key="index" :class-name="dg.dgName" :prop="col.field"
                :label="col.label" :width="col.width">
                <template slot-scope="{row}">
                    <template v-if="col.field == 'checkStatus'">
                        <span>{{ getKeyText(checkStatusArr, row.checkStatus) }}</span>
                    </template>

                    <template v-else-if="col.field == 'status'">
                        <span>{{ getKeyText(statuArr, row.status) }}</span>
                    </template>

                    <template v-else-if="col.field == 'applyUser'">
                        <span>{{ row.operUserInfo ? row.operUserInfo.split('-')[1] + '-' + row.operUserInfo.split('-')[2] :
                            ""
                        }}</span>
                    </template>

                    <template v-else-if="col.field == 'checkUname'">
                        <span>{{ row.checkUname ? row.checkUname.split('-')[1] + '-' + row.checkUname.split('-')[2] : ""
                        }}</span>
                    </template>

                    <template v-else-if="col.field == 'checkTwoUname'">
                        <span>{{ row.checkTwoUname ? row.checkTwoUname.split('-')[1] + '-' +
                            row.checkTwoUname.split('-')[2] : "" }}</span>
                    </template>

                    <template v-else-if="col.field == 'payWay'">
                        <span>{{ row.payWay == 1 ? "余额" : row.payWay == 2 ? "支付宝" : "微信" }}</span>
                    </template>

                    <template v-else-if="col.field == 'note'">
                        <span>{{ row.note && row.note.split('=')[2] }}</span>
                    </template>

                    <span v-else-if="col.field == 'atime'">{{ row.atime }}</span>

                    <template v-else>{{ getColVal(row, col.field) }}</template>
                </template>
            </el-table-column>
        </el-table>
        <Pagination v-show="dg.total > 0" :total="dg.total" :page.sync="dg.ps.page" :limit.sync="dg.ps.rows"
            @pagination="getDgList" />

        <WriteOffPayment v-if="writeOffPaymentMd.state" :myData="writeOffPaymentMd" @myClick="setWriteOffPaymentMd"
            @reloadDg="getDgList" />

    </div>
</template>

<script>
import DataGridBase from '@/views/mixins/DataGridBase';
import DataGridResize from '@/views/mixins/DataGridResize';
import elDragDialog from '@/directive/el-drag-dialog';
import TableSelfSet from '@/components/TableSelfSet';
import Pagination from '@/components/Pagination';

import WriteOffPayment from './write-off-payment';

import * as financeService from '@/api/services/travel/finance.service';

export default {
    name: 'PayApplyList',
    mixins: [DataGridBase, DataGridResize],
    directives: { elDragDialog },
    components: { TableSelfSet, Pagination, WriteOffPayment },
    data() {
        let cols = [
            // { label: "付款用户", field: "uname", width: 120 },
            // { label: "审核人用户", field: "checkUname", width: 100 },
            // { label: "核销人用户", field: "checkTwoUname", width: 100 },
            // { label: "审核状态", field: "checkStatus", width: 100 },
            // { label: "交易金额", field: "amoney", width: 100 },
            // { label: "交易状态", field: "status", width: 100 },
            // { label: "支付方式", field: "payWay", width: 100 },
            // { label: "交易类型", field: "type", width: 120 },
            // { label: "订单号", field: "orderNo", width: 150 },
            // { label: "提交时间", field: "atime", width: 130 },
            // { label: "备注", field: "note", width: 200 },

            { label: "申请人", field: "applyUser", width: 130 },
            { label: "审核人", field: "checkUname", width: 130 },
            { label: "核销人", field: "checkTwoUname", width: 130 },
            { label: "审核状态", field: "checkStatus", width: 100 },
            { label: "交易状态", field: "status", width: 100 },
            { label: "交易金额", field: "amoney", width: 100 },
            { label: "付款方式", field: "payWay", width: 100 },
            { label: "申请时间", field: "atime", width: 130 },
            { label: "收款方", field: "note", width: 200 },
            { label: "用车单号", field: "payOrdersNum", width: 200 },
        ];

        return {
            dg: {// 数据列表参数
                dgName: 'dg',
                tbName: 'payApplyListTb',
                total: 0,
                list: [],
                srcCols: cols,
                columns: [],
                selRows: [],
                ps: { // 过滤参数
                    page: 1, rows: 20,
                    // 查询起止日期
                    sedate: [],
                    // 申请人姓名/电话（支持模糊查询）
                    applyMan: '',
                    // 审核人姓名/电话（支持模糊查询）
                    checkMan: '',
                    // 核销人姓名/电话（支持模糊查询）
                    checkTwoMan: '',
                    // 付款金额
                    payMoney: '',
                    // 收款车队名称（支持模糊查询）
                    subject: '',
                    // 审核状态
                    checkStatus: []
                },
            },

            // 审核状态-数组
            checkStatusArr: [
                { label: '已拒绝', value: '-1' },
                { label: '未审核', value: '0' },
                { label: '已审核', value: '1' },
                { label: '已核销', value: '2' },
            ],
            // 交易状态-数组
            statuArr: [
                { label: '交易超时', value: '-1' },
                { label: '未付款', value: '0' },
                { label: '已付款', value: '1' },
                { label: '已退款', value: '2' },
            ],
            // 支付方式-数组 1:余额 2:支付宝 3:微信
            payWayArr: [
                { label: '余额', value: '1' },
                { label: '支付宝', value: '2' },
                { label: '微信', value: '3' },
            ],
            // 交易类型-数组
            typeArr: [
                { label: '充值余额', value: '1' },
                { label: '押金认证', value: '2' },
                { label: '顺风车单订单付款', value: '3' },
                { label: '顺风车多订单付款', value: '4' },
                { label: '普通单个订单', value: '5' },
                { label: '普通多个订单', value: '6' },
            ],

            // 核销付款-弹框
            writeOffPaymentMd: { state: false },
        }
    },
    created() {
        const that = this;

        that.initTbSetData(that.dg.dgName);

        that.getDgList();
    },
    methods: {
        // 获取-指定key-value对象数组的key描述
        getKeyText(arr = [], key) {
            let o = arr.find(it => it.value == key);
            return o ? o.label : '';
        },
        /** 获取-列表数据 */
        getDgList() {
            const that = this, ps = that.U.scopy(that.dg.ps);

            ps.stime = ps.sedate?.length ? ps.sedate[0] : '';
            ps.etime = ps.sedate?.length ? ps.sedate[1] : '';
            delete ps.sedate;

            ps.checkStatus = ps.checkStatus.join(',');

            financeService.orderPayApplyPageList(ps).then(res => {
                if (res.code == 1) {
                    let list = res.data;

                    list.forEach(it => { it.dgName = that.dg.dgName; });

                    that.dg.list = list;
                    that.dg.total = res.count;
                }
            });
        },

        /** 打开/关闭-核销付款-弹框 */
        setWriteOffPaymentMd(e) {
            const that = this, U = that.U, rows = that.getSeledRows(), md = that.writeOffPaymentMd;

            if (!e.state) {
                md.obj = null;
                md.state = false;
            } else {
                if (rows.length !== 1) {
                    U.qerror(`${rows.length === 0 ? '请' : '只能'}选择一条数据`);
                } else if (rows.length == 1) {
                    md.state = true;
                    md.obj = rows[0];
                }
            }
        },

    },
}
</script>
